<!--
 * @Author: coman
 * @LastEditors: coman
 * @Date: 2020-06-28 17:46:52
 * @motto: No pain,No gain
 * @LastEditTime: 2020-06-28 21:21:00
--> 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        form{
            height: 360px;
            width: 410px;
            margin: 30px auto;
            background: skyblue;
            
        }
        form p{
            margin-top: 10px;
        }
        form p label{
            width: 76px;
            margin-right: 20px;
            display: block;
            float: left;
            text-align: right;
           
        }
        form p input{
            
            width: 180px;
            height: 20px;
            outline: none;
            
        }
       
     
    </style>
</head>
<body>
    <form>
            <p> <label for="">账号</label>  <input type="text" id="account"><span id="alert_account"></span></p>
            <p> <label for="">昵称</label> <input type="text" id="userName"><span id="alert_userName"></span></p>
            <p><label for="">电子邮箱</label> <input type="email" name="" id="email"><span id="alert_email"></span></p>
            <p><label for="">身份证</label> <input type="text" id="idCard"><span id="alert_idcard"></span></p>
            <p><label for="">手机号码</label><input type="text" id="phone"><span id="alert_phone"></span></p>
            <p><label for="">生日</label> <input type="text" id="birth"><span id="alert_birthday"></span></p>
            <p><label for="">密码</label> <input type="password" name="" id="pass"><span id="alert_passWord"></span></p>
            <p><label for="">确认密码</label> <input type="password" name="" id="repass"><span id="alert_repass"></span></p>
            <input type="button" value="提交" id="btn">
            <input type="reset" value="清空">
    </form>
    <script>
        var account = document.querySelector("#account");
        var userName = document.querySelector("#userName");
        var email = document.querySelector("#email");
        var idCard = document.querySelector("#idCard");
        var phone = document.querySelector("#phone");
        var birth = document.querySelector("#birth");
        var pass = document.querySelector("#pass");
        var repass = document.querySelector("#repass");
        
        var reg_account = /^[a-zA-Z](\w|-){5,19}$/;
        var reg_userName = /^[\u4e00-\u9fa5]{3,6}$/;
        var reg_email = /^[a-zA-Z](\w|-){5,12}@163(.com|.cn|.net)/;
        var reg_idCard =/(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0[1-9]|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/;
        var reg_phone = /^1[345678]\d{9}$/
        var reg_birth = /^\d{4}(-|\/)(0[1-9]|1[0-2])\1(0[1-9]|[1-2]\d|3[0-1])$/
        var reg_pass = /^\S{1,20}$/
        account.onblur=()=>{ 
            if(account.value===""){
                alert_account.style.color="red"
                alert_account.innerHTML="账户名不能为空";
            }else if(reg(reg_account,account.value)){
                alert_account.style.color="green"
                alert_account.innerHTML="账户名格式正确";
            }else{
                alert_account.style.color="red"
                alert_account.innerHTML="账户名格式错误";
            }
        }
        userName.onblur=()=>{
            if(userName.value===""){
                alert_userName.style.color="red";
                alert_userName.innerHTML="昵称不能为空";
            } else if(reg(reg_userName,userName.value)){
                alert_userName.style.color="green"
                alert_userName.innerHTML="昵称格式正确";
            }else{
                alert_userName.style.color="red"
                alert_userName.innerHTML="输入3-6个中文";
            }
        }
        email.onblur=()=>{
            if(email.value===""){
                alert_email.style.color="red";
                alert_email.innerHTML="邮箱不能为空";
            } else if(reg(reg_email,email.value)){
                alert_email.style.color="green"
                alert_email.innerHTML="邮箱格式正确";
            }else{
                alert_email.style.color="red"
                alert_email.innerHTML="输入正确邮箱";
            }
        }

        idCard.onblur=()=>{
            if(idCard.value===""){
                alert_idcard.style.color="red";
                alert_idcard.innerHTML="身份证不能为空";
            } else if(reg(reg_idCard,idCard.value)){
                alert_idcard.style.color="green"
                alert_idcard.innerHTML="身份证格式正确";
            }else{
                alert_idcard.style.color="red"
                alert_idcard.innerHTML="输入正确身份证号";
            }
        }

        phone.onblur=()=>{
            if(phone.value===""){
                alert_phone.style.color="red";
                alert_phone.innerHTML="手机号不能为空";
            } else if(reg(reg_phone,phone.value)){
                alert_phone.style.color="green"
                alert_phone.innerHTML="手机号格式正确";
            }else{
                alert_phone.style.color="red"
                alert_phone.innerHTML="输入正确手机号";
            }
        }
        birth.onblur=()=>{
            if(birth.value===""){
                alert_birthday.style.color="red";
                alert_birthday.innerHTML="生日不能为空";
            } else if(reg(reg_birth,birth.value)){
                alert_birthday.style.color="green"
                alert_birthday.innerHTML="生日格式正确";
            }else{
                alert_birthday.style.color="red"
                alert_birthday.innerHTML="输入正确生日";
            }
        }

        pass.onblur=()=>{
            if(pass.value===""){
                alert_passWord.style.color="red";
                alert_passWord.innerHTML="密码不能为空";
            } else if(reg(reg_pass,pass.value)){
                alert_passWord.style.color="green"
                alert_passWord.innerHTML="密码格式正确";
            }else{
                alert_passWord.style.color="red"
                alert_passWord.innerHTML="输入正确格式密码";
            }
        }
        repass.onblur=()=>{
            if(repass.value!==pass.value){
                alert_repass.style.color="red"
                alert_repass.innerHTML="两次密码不一致";
            }else{
                alert_repass.style.color="green"
                alert_repass.innerHTML="密码一致";
            }
        }
        function reg(regx,query){
            return regx.test(query);
        }
    </script>
</body>
</html>